<template>
	<el-select v-model="content" clearable filterable :size="size" :multiple="multiple" :placeholder="placeholder" style="width: 100%" @change="handleChange">
		<el-option v-for="option in list" :key="option.dictCode" :label="option.dictLabel" :value="valueKey == 'value' ? option.dictValue : option.dictLabel" />
	</el-select>
</template>
<script setup>
import { useUserInfo } from '@/stores/userInfo'
const props = defineProps({
	dictKey: {
		type: String,
		default: '',
	},
	placeholder: {
		type: String,
		default: '请选择',
	},
	multiple: {
		type: Boolean,
		default: false,
	},
	valueKey: {
		type: String,
		default: 'value', // label
	},
	size: {
		type: String,
		default: 'default',
	},
})
const emit = defineEmits(['update:modelValue'])
const { dictList } = useUserInfo()

const state = reactive({
	list: dictList[props.dictKey],
	content: props.multiple ? [] : '',
})
const { list, content } = toRefs(state)

const handleChange = e => {
	emit('update:modelValue', e)
}
</script>
